<template>
    <view class="resultScreen">
        <img class="bg" src="../../static/img/bg.jpg" alt="">


        <view class="container">
            <view class="wrap-4-9">
                <view class="wrap" :class="{'wrap-4': result.type===4, 'wrap-9': result.type===9}">
                    <view v-for="(list,i) in result.sdArr" :key="i">
                        <view v-for="(item,j) in list" :key="j" class="item" :data-x="i" :data-y="j" :data-num="item"
                              :class="{mt: i>0 && i%typeSqrt===0, ml: j>0 && j%typeSqrt===0}"
                              @click="signChange">
                            {{item}}
                        </view>
                    </view>
                </view>

                <view class="result">{{status}}</view>
            </view>

            <view class="res-wrap">
                <view>本次用时：
                    <span class="mr">{{result.timeMinutes}}</span>分
                    <span class="mlr">{{result.timeSeconds}}</span>秒
                </view>
                <view>错误步数：<span>{{result.errCount}}</span></view>
                <view>挑战次数：<span>{{result.count}}</span></view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                result: {},
                status: '',
                typeSqrt: 0
            }
        },
        onLoad(path) {
            this.result = JSON.parse(path.resData);
            this.typeSqrt = Math.sqrt(this.result.type);
            let time = this.result.time;
            if (this.result.type === 4) {
                if (time < 60) this.status = '完美！！！';
                else if (time > 120) this.status = '恭喜！';
                else this.status = '棒棒哒！！';
            } else if (this.result.type === 9) {
                if (time < 180) this.status = '完美！！！';
                else if (time > 360) this.status = '恭喜！';
                else this.status = '棒棒哒！！';
            }
        },
        methods: {}
    }
</script>

<style lang="less">
    @import "../../static/style/common";

    .resultScreen {
        height: 100%;
        position: relative;

        .bg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .container {
            position: absolute;
            .tlrB(0, 0, 0, 10vh);
            z-index: 9;
            display: flex;
            flex-flow: column;
            align-items: center;

            .wrap-4-9 {
                flex: 1;
                width: 100%;
                position: relative;

                .result {
                    .whh(56vw, 56vw);
                    text-align: center;
                    font-size: 64/7.5vw;
                    font-weight: 600;
                    color: red;
                    background-color: #ffffff;
                    border-radius: 50%;
                    opacity: 0.4;
                    position: absolute;
                    .tl(50%, 50%);
                    z-index: 99;
                    margin: -28vw 0 0 -28vw;
                }

                .wrap {
                    box-sizing: border-box;
                    background-color: @color_01;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);

                    .item {
                        float: left;
                        background-color: @color_02;
                        color: #ffffff;
                        border-radius: 2vw;
                        box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px 2px;
                        text-shadow: 0 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 1px 3px rgba(0, 0, 0, 0.5);
                        text-align: center;
                    }
                }

                .wrap-4 {
                    .wh(56vw, 56vw);
                    left: 22vw;
                    border-radius: 2vw;
                    padding: 1vw;

                    .item {
                        .wh(10vw, 10vw);
                        line-height: 10vw - 1px;
                        font-size: 44/7.5vw;
                        margin-top: 2vw;
                        margin-left: 2vw;
                    }

                    .mt {
                        margin-top: 6vw;
                    }

                    .ml {
                        margin-left: 6vw;
                    }
                }

                .wrap-4:before, .wrap-4:after {
                    content: "";
                    background-color: @color_03;
                    position: absolute;
                }

                .wrap-4:before {
                    .wh(100%, 2px);
                    .tl(50%, 0);
                    margin-top: -1px;
                }

                .wrap-4:after {
                    .wh(2px, 100%);
                    .tl(0, 50%);
                    margin-left: -1px;
                }

                .wrap-9 {
                    .wh(88vw, 88vw);
                    left: 6vw;
                    border-radius: 1vw;
                    padding: 1vw;

                    .item {
                        .wh(8vw, 8vw);
                        line-height: 8vw - 1px;
                        font-size: 36/7.5vw;
                        margin-top: 1vw;
                        margin-left: 1vw;
                    }

                    .mt {
                        margin-top: 3vw;
                    }

                    .ml {
                        margin-left: 3vw;
                    }
                }
            }

            .res-wrap {
                line-height: 2;
                font-size: 36/7.5vw;
                color: #ffffff;
                text-shadow: 0 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 1px 3px rgba(0, 0, 0, 0.5);

                span {
                    color: red;
                    font-weight: 600;
                }

                .mr, .mlr {
                    padding-right: 12/7.5vw;
                }

                .mlr {
                    padding-left: 12/7.5vw;
                }
            }
        }
    }
</style>
